<template>
  <div class="detail" ref="detailRef">
    <div class="navbar">
      <van-nav-bar
        v-if="showTabControl"
        title="房屋详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      ></van-nav-bar>
      <!--  -->
      <tabControl
        v-else
        ref="tabControlRef"
        :titles="titles"
        @changeTab="getTabChange"
      ></tabControl>
    </div>
    <div class="main" v-memo="[mainPart]">
      <detailSwiper :swipeData="mainPart?.topModule.housePicture.housePics"></detailSwiper>
      <detailTopInfos
        name="描述"
        :ref="getSectionRef"
        :topInfos="mainPart?.topModule"
      ></detailTopInfos>
      <detailFacility
        name="设施"
        :ref="getSectionRef"
        :houseFacility="mainPart?.dynamicModule.facilityModule.houseFacility"
      ></detailFacility>
      <detailLandlord
        name="房东"
        :ref="getSectionRef"
        :landlordInfo="mainPart?.dynamicModule.landlordModule.landlordInfo"
      ></detailLandlord>
      <detailMap
        name="周边"
        :ref="getSectionRef"
        :position="mainPart?.dynamicModule.positionModule"
      ></detailMap>
      <detailIntro
        name="注意"
        :ref="getSectionRef"
        :priceIntro="mainPart?.introductionModule"
      ></detailIntro>
    </div>
  </div>
</template>

<script setup>
//mainPart?.dynamicModule.positionModule
import { useRoute } from 'vue-router'
import { getDetailInfo } from '@/services/modules/detail'
import { computed, onMounted, ref, toRefs, watch } from 'vue'
import detailSwiper from '../detail/detail-swiper.vue'
import detailTopInfos from '../detail/detail-top-infos.vue'
import detailFacility from '../detail/detail-facility.vue'
import detailLandlord from '../detail/detail-landlord.vue'
import detailMap from '../detail/detail-map.vue'
import detailIntro from '../detail/detail-intro.vue'
import tabControl from '@/components/tab-control.vue'
import useScrollLoad from '@/hooks/useScroll'

const route = useRoute()
const detailInfos = ref([])
const mainPart = computed(() => {
  return detailInfos.value.mainPart
})
const detailRef = ref()
const { scrollTop } = toRefs(useScrollLoad(detailRef))

const sectionEls = ref({})
const showTabControl = computed(() => {
  return scrollTop.value <= 300
})
const titles = computed(() => {
  return Object.keys(sectionEls.value)
})
const tabControlRef = ref()

onMounted(() => {
  getDetailInfos()
})
const isClick = ref(false)
const currentDistance = ref(0)
watch(scrollTop, (newValue) => {
  console.log('scrollTop', newValue)

  if (currentDistance.value - 44  === newValue) {
    isClick.value = false
    console.log(isClick.value)
  }
  if (isClick.value) return
  const els = Object.values(sectionEls.value)
  const values = els.map((el) => {
    return el.offsetTop - 44 - 46
  })
  let index = values.length - 1

  for (let i = 0; i < values.length; i++) {
    let value = values[i]
    if (value > newValue) {
      index = i - 1
      break
    }
  }
  tabControlRef.value?.changeIndex(index)
})

const getDetailInfos = async () => {
  const { data } = await getDetailInfo(route.query.id)
  detailInfos.value = data
}
const getSectionRef = (value) => {
  if (!value) return
  sectionEls.value[value.$el.getAttribute('name')] = value.$el
}
const getTabChange = (tabInfo) => {
  isClick.value = true
  const key = Object.keys(sectionEls.value)[tabInfo.name]
  const el = sectionEls.value[key]
  currentDistance.value = el.offsetTop
  console.log('click', currentDistance.value)

  if (detailRef.value) {
    detailRef.value.scrollTo({
      top: sectionEls.value[key].offsetTop - 44,
      duration: 300,
      behavior: 'smooth',
    })
  }
}
</script>

<style lang="scss" scoped>
.detail {
  height: 100vh;
  overflow-y: auto;
}
</style>
